<template>
    <div class="ShowTab" :class="type ? 'links' : ''">
        <div class="title2" v-if="!type">医疗健康指向</div>

        <div class="hp_title" v-if="type">
            <h1>医疗健康指向</h1>
        </div>

        <ul class="yiliao">
            <a
                v-for="(item, index) in POINTTO"
                :key="index"
                :href="item.link_url"
                target="_blank"
            >
                <div>
                    <img :src="item.image_url" alt="" />
                </div>
                <p>{{ item.name }}</p>
            </a>
        </ul>

        <hr />
        <div class="hp_title" v-if="type">
            <h1>合作伙伴</h1>
        </div>
        <div class="title2" v-if="!type">合作伙伴</div>

        <ul class="huoban">
            <a
                v-for="(item, index) in PARTNERS"
                :key="index"
                :href="item.link_url"
                target="_blank"
            >
                <img :src="item.image_url" alt="" />
            </a>
        </ul>

        <div class="title2" v-if="!type">友情链接</div>
        <div class="hp_title" v-if="type">
            <h1>友情链接</h1>
        </div>
        <ul class="lianjie">
            <a
                v-for="(item, index) in FRIENDS"
                :key="index"
                :href="item.link_url"
                target="_blank"
                >{{ item.name }}</a
            >
        </ul>
    </div>
</template>

<script>
import { axiosGet } from '../server/axios';
export default {
    name: 'ShowTab',
    props: {
        type: Boolean,
    },
    data() {
        return {
            POINTTO: [],
            PARTNERS: [],
            FRIENDS: [],
        };
    },
    mounted() {
        this.getDetial();
        console.log(this.type);
    },
    methods: {
        getDetial() {
            axiosGet(
                `/api/friend_link`,
                {
                    type: 'POINTTO',
                },
                (res) => {
                    console.log(res.data);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }
                    this.POINTTO = res.data;
                }
            );
            axiosGet(
                `/api/friend_link`,
                {
                    type: 'PARTNERS',
                },
                (res) => {
                    console.log(res.data);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }
                    this.PARTNERS = res.data;
                }
            );

            axiosGet(
                `/api/friend_link`,
                {
                    type: 'FRIENDS',
                },
                (res) => {
                    console.log(res.data);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }
                    this.FRIENDS = res.data;
                }
            );
        },
    },
};
</script>
<style scoped lang="scss">
#app .links {
    padding: 0 0 50px;

    .yiliao {
        padding: 0 30px;

        a {
            margin: 10px 40px;
            display: block;
        }
    }

    .huoban {
        padding: 0 30px;
    }

    .lianjie {
        padding: 0 30px;
    }
}
.ShowTab {
    padding: 20px 0 20px 20px;
}
.yiliao {
    overflow: hidden;
    margin-bottom: 20px;
    a {
        margin-right: 16px;
        width: 81px;
        float: left;
        cursor: pointer;
        div {
            width: 81px;
            height: 81px;
            background: #ffffff;
            border: 2px solid #f6f6f6;
            border-radius: 10px;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        p {
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #a7a7a7;
            text-align: center;
            line-height: 16px;
            margin-top: 10px;
            cursor: pointer;
        }

        p:hover {
            color: #787878;
        }
    }
}
.huoban {
    overflow: hidden;
    a {
        width: 177px;
        height: 66px;
        background: #ffffff;
        border: 2px solid #f6f6f6;
        border-radius: 4px;
        margin: 0 14px 19px 0;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        img {
            max-height: 60px;
            max-width: 170px;
        }
    }
    a:hover {
        background: #fafafa;
    }
}
.lianjie {
    font-size: 14px;
    font-family: Source Han Sans SC VF;
    font-weight: 400;
    color: #a7a7a7;
    line-height: 28px;

    a {
        margin-right: 8px;
        cursor: pointer;
        color: #a7a7a7;
    }

    a:hover {
        color: #787878;
    }
}
</style>
